<template>
	<el-dialog title="新增服务" width="600" v-model="visible" @close="closeDialog" :destroy-on-close="true" draggable>
		<el-form ref="layerDialogFormRef" label-position="left" :model="state.ruleForm" :rules="dataRules" label-width="130px" v-loading="loading">
			<el-row :gutter="20">
				<el-col :span="24" class="mb20">
					<el-form-item label="选择文件数据源" prop="fileId" :required="true">
						<el-row :gutter="20">
							<el-col :span="18">
								<el-select v-model="state.ruleForm.fileId" :suffix-icon="IconDropDown" placeholder="选择文件数据源">
									<el-option v-for="item in fileOptions" :key="item.uuid" :label="item.fileName" :value="item.uuid" />
								</el-select>
							</el-col>
						</el-row>
					</el-form-item>
				</el-col>
				<el-col :span="24" class="mb20">
					<el-form-item label="备注" prop="remarks" :required="true">
						<el-input v-model="state.ruleForm.remarks" clearable placeholder="请输入备注"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" @click="onSubmit" :disabled="loading">{{ $t('common.publish') }}</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts" name="layerDialog">
import { useI18n } from 'vue-i18n';
import { reactive, ref, nextTick } from 'vue';
import { addInterface, getAllBizSourceUrl, pageList } from '/@/api/communal/interface.ts';
import { useMessage } from '/@/hooks/message';
import DropDown from '/@/assets/icons/drop-down.svg';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
const { t } = useI18n();
// 引入组件

// 定义变量内容
const visible = ref(false);
const loading = ref(false);
const fileOptions = ref<any[]>([]);
const layerDialogFormRef = ref();
// 定义需要的数据
const state = reactive({
	ruleForm: {
		fileId: '',
		remarks: '',
	},
	queryForm: {
		interfaceName: '',
		requestUrl: '',
		method: '',
		size: 10,
		current: 1,
	},
});

const IconDropDown = {
	render: () => {
		return h('img', { src: DropDown });
	},
};

// 表单校验规则
const dataRules = reactive({
	fileId: [{ required: true, message: '路径不能为空', trigger: 'blur' }],
	remarks: [{ required: true, message: '备注不能为空', trigger: 'blur' }],
});

// 打开弹窗
const openDialog = () => {
	visible.value = true;
	getAllBizSourceUrl().then((res: any) => {
		fileOptions.value = res.data;
	});
	nextTick(() => {
		layerDialogFormRef.value?.resetFields();
	});
};

// 保存数据
const onSubmit = async () => {
	const valid = await layerDialogFormRef.value.validate().catch(() => {});
	if (!valid) return false;
	try {
		await addInterface(state.ruleForm);
		useMessage().success(t('common.addSuccessText'));
		visible.value = false;
		emit('refresh');
	} catch (err: any) {
		useMessage().error(err.msg);
	}
	await pageList(state.queryForm);
};

const closeDialog = () => {
	visible.value = false;
	state.ruleForm = { fileId: '', remarks: '' };
};

// 暴露变量 只有暴漏出来的变量 父组件才能使用
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">
.dialog-footer {
	display: flex;
	justify-content: center;
}

.blue-card {
	margin: 5px;
	padding: 10px;
	border-radius: 8px;
	background: #eaf1ff;
}
</style>
